<template>
	<div>
		<!-- 用户中心页 -->
		<!-- 头部 -->
		<van-nav-bar class="header" title="用户中心">
			<template #left>
        	<img
				@click="$router.history.go(-1)"
				style="width: 25%"
				src="@/assets/img/icon/arrow_left.png"
        	/>
      		</template>
		</van-nav-bar>
		<!-- 主体部分 -->
		<div id="mainer" v-if="user">
			<!-- 头像 -->
			<div class="row">
				<div>头像</div>
				<img :src="`${user.avatar}`">
			</div>
			<div class="row">
				<div>用户名</div>
				<div>{{user.user_name}}</div>
			</div>
			<div class="row">
				<div>手机号</div>
				<div>{{user.phone}}</div>
			</div>
			<div class="row">
				<div>邮箱</div>
				<div>{{user.email}}</div>
			</div>
			<div class="row">
				<div>个性签名</div>
				<div>{{user.detail}}</div>
			</div>
		</div>
		<!-- 退出登录按钮 -->
		<div @click="loginout" id="loginout">退出当前用户</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user:{} //保存用户的数据
			}
		},
		methods:{
			loginout(){
				this.$dialog.alert({
					message:'你确定要退出登录吗？',
					showCancelButton:true
				}).then(()=>{
					// 用户点击确认
					sessionStorage.removeItem('user')
					// 清除用户的缓存
					sessionStorage.removeItem('token')
					// 弹窗提示
					this.$dialog.alert({
						message:'退出成功！'
					}).then(()=> {
						this.$router.push('/home/index')
					})
				}).catch(()=> {
					return
				})
			}
		},
		mounted(){
			this.user = JSON.parse(sessionStorage.getItem('user'))
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #9a4145;
	.van-nav-bar__content {
		height: 2.38em;
	}
	.van-nav-bar__title {
		color: #fff;
	}
}
// 主体部分
#mainer {
	margin-top: 2.5em;
	padding: 0 0.315em;
	// 每一行
	>div.row {
		border-bottom: 1px solid #f5f5f5;
		font-size: .9em;
		padding: 1.25em 0.615em;
		display: flex;
		align-items: center;
		justify-content: space-between;
		img {
			width: 2.8em;
			border-radius: 50%;
		}
		>div {
			// 右侧的文字
			&:nth-child(2){
				color: #aaafb5;
			}
		}
	}
}
#loginout {
	color: #fff;
	background-color: #9a4145;
	position: fixed;
	bottom: 3.75em;
	left: 50%;
	margin-left: -4.38em;
	padding: 0.615em 1.25em;
	border-radius: 3.125em;
}
</style>